<template>
    <div class="inner">
         <svg width="190" height="190" version="1.1" xmlns="http://www.w3.org/2000/svg" class="yin">
            <circle cx="95" cy="95" r="95" stroke="rgba(255, 0, 0, 0.1)" stroke-width="1" fill="transparent"/>
        </svg>
        <svg width="190" height="190" version="1.1" xmlns="http://www.w3.org/2000/svg" class="light">
            <circle cx="95" cy="95" r="95" stroke="#ffffff" stroke-width="2" fill="transparent" :style="{animationDuration:duration+'s'}"/>
        </svg>
        <div class="text">
            <div class="today">
                <span>今日挖宝</span>
                <br>
                <span>{{ todayValue }}</span>
            </div>
            <div class="total">
                <div>总挖宝(DLB)</div>
                <v-countup 
                start-value=0 
                :end-value="endValue" 
                :decimals="decimals" 
                :duration="duration" 
                :options="options" 
                :style="{fontSize:fontSize}" 
                class="countupNum"></v-countup>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            decimals: 3, 
            duration: 1,
            options:{
                separator: '', // 数字分隔符
                decimal: '.', // 小数分隔符
            },
            fontSize:'30px'
        }
    },
    props:{
        todayValue:{
            type:String
        },
        endValue:{
            type:String
        }
    },
    mounted(){
        const loc = String(this.endValue).indexOf(".") + 1;  //获取小数点的位置
        const count = String(this.endValue).length - loc;   //获取小数点后的个数
        if( loc > 0 ){
            this.decimals = count;
        }

        if( this.endValue < 30 ){
            this.duration = 0.2;
        }else if( this.endValue >= 30 && this.endValue < 100 ){
            this.duration = 0.5;
        }else{
            this.duration = 1;
        }

        
        const num = loc-1 +count;
        if( num >= 11 ){
            //数字占位超过10 字体变小
            this.fontSize = '22px';
        }else if( num >= 9 && num < 11 ){
            this.fontSize = '25px'
        }else{
            this.fontSize = '30px';
        }
    }
}
</script>


<style lang="stylus" scoped>
.inner{
    width: 190px;
    margin:0 auto;
    height: 120px;
    overflow: hidden;
    position: relative;
    svg{
        border-radius: 50%;
        background: transparent;
        position:absolute;
        top:0;
        left:0;
        circle{
            stroke-dasharray: 330 245;
            stroke-dashoffset: 300;
        }
        &.light{
            circle{
                animation-name: dash;
                animation-timing-function:linear;
            }
        }
    }
    .text{
        font-size:13px;
        color:rgba(255,255,255,1);
        text-align:center;
        position: absolute;
        width: 100%;
        bottom: 0;
        .total{
            margin-top:5%;
            span{
                display:block;
            }
        }
    }
}
@keyframes dash {
    from {stroke-dasharray: 0 534; } 
    to {stroke-dasharray: 330 245; } 
};
</style>

